<template>
	<view class="page">
		<!-- #ifdef APP-NVUE -->
		<text class="msg">nvue</text>
		<view class="qrcode-box">
			<view class="qrcode">
				<u-qrcode ref="qr9" canvas-id="qr9" :value="text" :size="size" :options="{
            background: {
              image: {
                src: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8?pid=ImgDet&rs=1',
                width: 1, // 图片宽
                height: 1, // 图片高
                align: ['center', 'center'], // 图片对齐方式水平，垂直
                anchor: [0, 0], // 图片位置，X坐标，Y坐标
                alpha: 1 // 透明度
              }
            },
            foreground: {
              color: '#f0f0f0'
            },
            margin: 10
          }" @click="remake('qr9')" @complete="complete($event, 'qr9')"></u-qrcode>
			</view>
			<text class="msg">请保存到本地分享！！！</text>
			<button class="save" type="primary" size="mini" @click="save('qr9')">保存</button>
			<button class="aa" type="primary" size="mini" @click="qu('qr9')">继续邀请</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text: {},
				te: {

				},
				size: 200
			};
		},
		//时间戳的处理    
		filters: {
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}

		},
		onLoad(item) {
			const it = JSON.parse(decodeURIComponent(item.item));
			// var time1=JSON.stringify(it.accessTime |formatDate);
			// var time2=JSON.stringify(it.endTime |formatDate);
			var a = {
				房屋: it.housename,
				访客姓名: it.visitorsName,
				性别: it.visitorsAge,
				手机号码: it.visitorsPhone,
				访问日期: it.accessTime,
				访问时长: it.endTime
			}
			this.text = JSON.stringify(a)
		},
		methods: {
			qu() {
				uni.navigateTo({
					url: './invitation'
				})
			},
			complete(e, refName) {
				if (e.success) {
					console.log(refName + '生成成功');
				} else {
					console.log(refName + '生成失败');
				}
			},
			remake(refName) {
				const ref = this.$refs[refName];
				/* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
				if (Array.isArray(ref)) {
					ref[0].remake();
				} else {
					ref.remake();
				}
			},
			save(refName) {
				uni.showLoading({
					title: '保存中',
					mask: true
				});
				const ref = this.$refs[refName];
				/* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
				if (Array.isArray(ref)) {
					ref[0].save({
						success: res => {
							uni.showToast({
								icon: 'success',
								title: '保存成功'
							});

						},
						fail: err => {
							uni.showToast({
								icon: 'none',
								title: JSON.stringify(err)
							});
						}
					});
				} else {
					ref.save({
						success: res => {
							uni.hideLoading();
							uni.showToast({
								icon: 'success',
								title: '保存成功'
							});
						},
						fail: err => {
							uni.showToast({
								icon: 'none',
								title: JSON.stringify(err)
							});
						}
					});
				}
			}
		}
	};
</script>

<style>
	.page {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		align-items: center;
	}

	.input {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 320px;
		margin: 30px 0;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}

	.qrcode-box {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		align-items: center;
		margin-bottom: 30px;
		padding: 0 30px;
	}

	.qrcode {
		padding: 16px;
		background-color: #ffffff;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		overflow: hidden;
	}


	.msg {
		margin-top: 15px;
		font-size: 14px;
		color: #9a9b9c;
	}

	.save {
		/* margin-top: 10px; */
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.aa {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(133, 207, 255, 1.0), rgba(255, 190, 98, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
</style>
